<!--
 * @Description:
 * @Author: 月间
 * @Date: 2024-12-11 23:10:05
 * @LastEditTime: 2025-06-03 22:48:12
 * @LastEditors:
-->
<script setup lang="tsx">
import { NButton, NPopconfirm, NTag } from 'naive-ui';
import { useBoolean } from '@sa/hooks';
import { computed, reactive, ref, watch } from 'vue';
import { fetchGetOperateLogList } from '@/service/api';
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { $t } from '@/locales';
import OperateSearch from './modules/operate-search.vue';

const appStore = useAppStore();

const {
  columns,
  columnChecks,
  data,
  loading,
  getData,
  getDataByPage,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: fetchGetOperateLogList,
  apiParams: {
    current: 1,
    size: 10,
    username: null,
    method: null,
    request_id: null
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48,
      fixed: 'left'
    },
    {
      key: 'index',
      title: $t('common.index'),
      width: 64,
      align: 'center',
      fixed: 'left'
    },
    {
      key: 'request_id',
      title: '请求ID',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'username',
      title: '用户名',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'client_ip',
      title: '客户端IP',
      align: 'center',
      minWidth: 100
    },
    // {
    //   key: 'request_api',
    //   title: '请求API',
    //   align: 'center',
    //   minWidth: 100
    // },
    {
      key: 'method',
      title: '请求方式',
      align: 'center',
      minWidth: 100,
      render(row) {
        const method = row.method?.toUpperCase() || '';
        const tagMap: Record<string, 'default' | 'success' | 'info' | 'warning' | 'error'> = {
          GET: 'success',
          POST: 'info',
          PUT: 'warning',
          DELETE: 'error',
          PATCH: 'default'
        };
        return (
          <NTag type={method in tagMap ? tagMap[method] : 'default'} size="small">
            {method || 'UNKNOWN'}
          </NTag>
        );
      }
    },
    {
      key: 'api_path',
      title: '请求路径',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'status_code',
      title: '状态码',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'params',
      title: '请求参数',
      align: 'center',
      ellipsis: {
        tooltip: true
      },
      minWidth: 100
    },
    {
      key: 'cost_time',
      title: '耗时',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'summary',
      title: '操作类型',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'description',
      title: '操作描述',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'tags',
      title: '标签',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'system',
      title: '操作系统',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'browser',
      title: '浏览器',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'route_name',
      title: '路由名称',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'content_length',
      title: '响应长度',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'created_at',
      title: '操作时间',
      align: 'center',
      minWidth: 100
    }
  ]
});

const {
  drawerVisible,
  operateType,
  editingData,
  handleAdd,
  handleEdit,
  checkedRowKeys,
  onBatchDeleted,
  onDeleted
  // closeDrawer
} = useTableOperate(data, getData);

async function handleBatchDelete() {
  // request
  // console.log(checkedRowKeys.value);
  // const { error } = await fetchDeleteResource(checkedRowKeys.value);
  // if (error) return;
  onBatchDeleted();
}

function handleDelete(id: number) {
  // request
  console.log(id);

  onDeleted();
}
function handleMenu(id: number) {
  roleId.value = id;
  openMenuAuthModal();
}
function handleButton(id: number) {
  roleId.value = id;
  openButtonAuthModal();
}

function edit(id: number) {
  handleEdit(id);
}
const roleId = ref<number>(-1);
const { bool: menuAuthVisible, setTrue: openMenuAuthModal } = useBoolean();
const { bool: buttonAuthVisible, setTrue: openButtonAuthModal } = useBoolean();
const showModal = ref(false);

function onNegativeClick() {
  showModal.value = false;
}
function onPositiveClick() {
  showModal.value = false;
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <OperateSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NCard title="操作日志" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          @refresh="getData"
        >
          <template #prefix>
            <NPopconfirm @positive-click="handleBatchDelete">
              <template #trigger>
                <NButton size="small" ghost type="error" :disabled="checkedRowKeys.length === 0">
                  <template #icon>
                    <icon-ic-round-delete class="text-icon" />
                  </template>
                  {{ $t('common.batchDelete') }}
                </NButton>
              </template>
              {{ $t('common.confirmDelete') }}
            </NPopconfirm>
          </template>
        </TableHeaderOperation>
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="2000"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
    <!-- 上传模态框 -->
    <!--
 <NModal v-model:show="showModal" :mask-closable="false" preset="dialog" title="上传" content="你确认" negative-text="取消"
      @positive-click="onPositiveClick" @negative-click="onNegativeClick">
      <n-upload multiple :custom-request="customRequest" directory-dnd :max="5" list-type="image"
        :create-thumbnail-url="createThumbnailUrl">
        <n-upload-dragger>
          <div style="margin-bottom: 12px">
            <n-icon size="48" :depth="3">
              <SvgIcon icon="flat-color-icons:upload" class="text-50px" />
            </n-icon>
          </div>
          <n-text style="font-size: 16px">
            点击或者拖动文件到该区域来上传
          </n-text>
          <n-p depth="3" style="margin: 8px 0 0 0">
            请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
          </n-p>
        </n-upload-dragger>
      </n-upload>
    </NModal>
-->
  </div>
</template>

<style scoped></style>
